<template>
  <div class="scale-wrapper">
    <div class="question-home">
      <div class="main-container">
        <div class="circle-area circle-practice"
          :style="{ backgroundColor: contentData.practiceCircleButton.bgColor || '#5BAAFF' }"
          @click="showPracticeDialog = true">
          <div class="title">{{ contentData.practiceCircleButton.title }}</div>
          <div class="sub-title">
            {{ statisticsData.answeredQuestionCount || 0 }}/{{
              statisticsData.totalQuestionCount || 0
            }}
          </div>
          <div class="action-button color-practice">
            {{ contentData.practiceCircleButton.buttonText }}
          </div>
        </div>

        <div class="right-area">
          <div class="title-area">
            <div class="main-title" :style="titleStyle">{{ contentData.practiceHeader.title }}</div>
            <div class="sub-title" :style="subTitleStyle">
              {{ contentData.practiceHeader.subTitle }}
            </div>
          </div>

          <div class="icon-list">
            <div class="icon-item" v-for="(item, index) in contentData.practice_question_list" :key="index"
              @click="toPractice(item)">
              <img :src="item.img" alt="" class="icon-img" :style="imgStyle" />
              <div class="icon-label">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="main-container">
        <div class="circle-area circle-exam"
          :style="{ backgroundColor: contentData.examCircleButton.bgColor || '#5BAAFF' }" @click="openSimulateDialog">
          <div class="title">{{ contentData.examCircleButton.title }}</div>
          <div class="sub-title">平均成绩：{{ statisticsData.averageScore || 0 }}分</div>
          <div class="action-button color-exam">{{ contentData.examCircleButton.buttonText }}</div>
        </div>

        <div class="right-area">
          <div class="title-area">
            <div class="main-title" :style="titleStyle">{{ contentData.examHeader.title }}</div>
            <div class="sub-title" :style="subTitleStyle">
              {{ contentData.examHeader.subTitle }}
            </div>
          </div>

          <!-- <div class="icon-list-exam"> -->
          <div class="icon-list">
            <div class="icon-item" v-for="(item, index) in contentData.exam_question_list" :key="index"
              @click="toPractice(item)">
              <img :src="item.img" alt="" class="icon-img" :style="imgStyle" />
              <div class="icon-label">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <practiceDialog :statistics-data="statisticsData" v-model:dialogVisible="showPracticeDialog"></practiceDialog>
    <simulateDialog :statistics-data="statisticsData" v-model:dialogVisible="showSimulateDialog"
      :config-data="configData" :key="showKey"></simulateDialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
import { useRouter } from 'vue-router'
import practiceDialog from './practiceDialog.vue'
import simulateDialog from './simulateDialog.vue'
import { getExamConfig } from '@/api/userApi'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'

const showKey = ref(0)
const userStore = useUserStore()
const router = useRouter()
const props = defineProps<{
  contentData: any
  statisticsData: {
    type: Object
    default: () => {}
  }
}>()

const showPracticeDialog = ref(false)

const showSimulateDialog = ref(false)

const statisticsData = ref<any>(props.statisticsData)

// rem 动态计算函数
function setRem() {
  const baseWidth = 1920
  const baseFontSize = 16
  const scale = window.innerWidth / baseWidth
  document.documentElement.style.fontSize = baseFontSize * scale + 'px'
}

let resizeTimer: number | null = null

function handleResize() {
  if (resizeTimer) {
    cancelAnimationFrame(resizeTimer)
  }
  resizeTimer = requestAnimationFrame(() => {
    setRem()
  })
}
const toPractice = (item: any) => {
  console.log(item, 'item===')
  const handlers: Record<string, () => void> = {
    '01': () => {
      router.push({ name: 'carefullyChosen' })
    },
    '02': () => {
      /* ... */
    },
    '03': () => {
      router.push({
        name: 'mnExam',
      })
    },
    '04': () => {
      /* ... */
    },
    '05': () => {
      router.push({ name: 'specialExercises' })
    },
    '06': () => {
      router.push({ name: 'chapterExercises' })
    },
    '07': () => {
      router.push({ name: 'confidentialRoll' })
    },
    '08': () => {
      router.push({ name: 'iconTrick' })
    },
    '10': () => {
      router.push({ name: 'wrong_question_collection' })
    },
    '11': () => {
      if (userStore.storeInfo.isExamRoomVip === 1) {
        router.push('realExam/index')
      } else {
        ElMessage.warning('暂无权限进入')
      }
    },
    '12': () => {
      router.push({ name: 'score_ranking' })
    },
  }

  if (handlers[item.link.pageUrlType]) {
    handlers[item.link.pageUrlType]()
  } else {
    // 其他情况
  }
}

const openSimulateDialog = async () => {
  await getExamInfo()
  showSimulateDialog.value = true
}

const configData = ref<any>({})
const getExamInfo = async () => {
  const res = await getExamConfig({
    categoryId: userStore.categoryId,
    carId: 1
  })
  configData.value = res.data[0]
  showKey.value = new Date().getTime()
}

onMounted(() => {
  setRem()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

const titleStyle = computed(() => {
  const s = props.contentData.headerStyle.titleStyle
  return {
    fontSize: s.fontSize / 16 + 'rem',
    color: s.color,
    fontWeight: s.fontWeight,
  }
})

const subTitleStyle = computed(() => {
  const s = props.contentData.headerStyle.subTitleStyle
  return {
    fontSize: s.fontSize / 16 + 'rem',
    color: s.color,
    fontWeight: s.fontWeight,
  }
})

const imgStyle = computed(() => {
  const s = props.contentData.imgStyle
  return {
    borderRadius: s.borderRadius / 16 + 'rem',
  }
})
</script>

<style scoped lang="scss">
@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

.scale-wrapper {
  width: 100vw;
  // height: 100vh;
  height: calc(100vh - rem(92) - rem(89) - rem(2));
  overflow: auto;
  position: relative;
}

.question-home {
  display: flex;
  flex-direction: column;
  border-radius: rem(12);
  background-color: #fff;
  // padding: rem(70) 0;
  padding: rem(40) 0;
}

.main-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: rem(40);
  padding: 0 rem(100);

  &:first-child {
    margin-bottom: rem(50);
  }

  .circle-area {
    width: rem(300);
    height: rem(300);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(rem(-10));
      // box-shadow: 0 rem(10) rem(20) rgba(0, 0, 0, 0.2);
    }

    .title {
      font-size: rem(40);
      font-weight: bold;
    }

    .sub-title {
      margin-top: rem(6);
      font-size: rem(20);
      opacity: 0.9;
    }

    .action-button {
      font-size: rem(24);
      font-weight: 500;
      padding: rem(8) rem(30);
      border-radius: rem(20);
      margin-top: rem(8);
      display: flex;
      flex-direction: column;
      gap: rem(12);
    }

    .color-practice {
      color: #46a1e6;
      background: linear-gradient(to bottom, #f2f9ff, rgba(242, 249, 255, 0.67));
    }

    .color-exam {
      color: #33ce6e;
      background: linear-gradient(to bottom, #f2f9ff, rgba(242, 249, 255, 0.67));
    }
  }

  .circle-practice {
    border: rem(24) solid #ecf7ff;
  }

  .circle-exam {
    border: rem(24) solid #eefbf0;
  }

  .right-area {
    flex: 1;
    padding: 0 rem(60);

    .title-area {
      text-align: center;
      margin-bottom: rem(30);

      .main-title {
        font-size: rem(20);
        font-weight: bold;
      }

      .sub-title {
        margin-top: rem(20);
        font-size: rem(14);
        color: #999;
      }
    }

    .icon-list,
    .icon-list-exam {
      display: grid;

      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        box-sizing: border-box;
        transition: all 0.3s ease;
        border-radius: rem(14);
        padding: rem(20);

        &:hover {
          transform: translateY(rem(-10));
          // box-shadow: 0 rem(10) rem(20) rgba(0, 0, 0, 0.2);
        }

        .icon-img {
          width: rem(80);
          height: rem(80);
          margin-bottom: rem(16);
        }

        .icon-label {
          font-size: rem(25);
          text-align: center;
          color: black;
        }
      }
    }

    .icon-list {
      grid-template-columns: repeat(v-bind('Math.max(props.contentData.practice_question_list.length, props.contentData.exam_question_list.length)'), 1fr);
    }

    .icon-list-exam {
      grid-template-columns: repeat(v-bind('props.contentData.exam_question_list.length'), 1fr);
    }
  }
}
</style>
